<template>
  <div class="row">
    <div v-if="isjia">欢迎</div>
    <div v-else-if="isShow">加载失败</div>
    <div v-else v-for="item in itemList" :key="item.id" class="card">
      <a href="item.html_url" target="_blank">
        <img
          :src="item.avatar_url"
          style="width: 100px"
        />
      </a>
      <p>{{1}}</p>
      <p class="card-text">{{item.login}}</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "VueDemoIndex",
  data() {
    return {
      itemList:[],
      isShow:false,
      isjia:true
    };
  },
  mounted() {
    this.$bus.$on("getData", this.getData);
  },
  methods: {
    getData(val) {
       this.isjia=false
        this.isShow=false
        val=val||"aa"
      axios.get(" https://api.github.com/search/users", { params: { q: val } }).then(v=>{
          this.itemList=v.data.items
      },e=>{
         this.isShow=true
      })
    },
  },
};
</script>

<style scoped>
.card {
  float: left;
  width: 33.333%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>